<template>
  <el-card class="box-card" style="height: 100%">
    <el-col :if="searchShow" :span="19" class="cloudFile_search_form">
      <el-form :inline="true" v-model="fileSearch" size="small" style="padding-top: 0.4rem;">
        <el-form-item>
          <el-tooltip content="返回上级目录" placement="top">
            <el-button type="primary" @click="toPre" v-show="this.position.pre" icon="el-icon-top">
            </el-button>
          </el-tooltip>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-tooltip v-for="(obj,key) of fileCtrl" :key="key" :content="obj.ctrlName" placement="top">
              <el-button type="primary" :icon="obj.type?'el-icon-folder-add':'el-icon-document-add'"
                         @click="newFile(key)"></el-button>
            </el-tooltip>
            <el-tooltip content="删除所选文件/文件夹" placement="top">
              <el-button type="primary" :disabled="unselected" @click="deleteFile" icon="el-icon-delete"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
        <el-form-item label="名称">
          <el-input
            placeholder="输入文件名称"
            v-model="fileSearch.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="文件类型">
          <el-select placeholder="文件类型" v-model="fileSearch.type">
            <el-option label="DOCX" value="docx"></el-option>
            <el-option label="XLSX" value="xlsx"></el-option>
            <el-option label="JPG" value="jpg"></el-option>
            <el-option label="PNG" value="png"></el-option>
            <el-option label="TEXT" value="text"></el-option>
            <el-option label="文件夹" value="FOLDER"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button-group>
            <el-tooltip content="搜索文件" placement="top">
              <el-button type="primary" @click="search" icon="el-icon-search"></el-button>
            </el-tooltip>
            <el-tooltip content="刷新" placement="top">
              <el-button type="primary" @click="refresh" icon="el-icon-refresh"></el-button>
            </el-tooltip>
            <el-tooltip content="设置提醒" placement="top">
              <el-button type="primary" @click="()=>{this.$emit('remindSet')}" :disabled="unselected"
                         icon="el-icon-alarm-clock"></el-button>
            </el-tooltip>
          </el-button-group>
        </el-form-item>
      </el-form>
    </el-col>
    <!-- <el-col :if="diskInfoShow" :span="5" class="cloudFile_search_form">
      <el-col :span="10">磁盘使用情况</el-col>
      <el-col :span="12" style="text-align: right">剩余{{ getSpaceFreeFormat(diskInfo) }}</el-col>
      <el-col :span="24">
        <el-progress
          :percentage="diskInfo?((((diskInfo.space-diskInfo.spaceFree)/(diskInfo.space||1))*100).toFixed(2)*1):0"></el-progress>
      </el-col>
    </el-col> -->
    <el-col v-if="showAsBlock" :span="24" style="height: 49rem; overflow: auto">
      <el-col
        :span="3"
        class="cloud_file_entity"
        v-for="file in fileList"
        v-bind:key="file.id"
      >
        <div class="cloud_file_show" @mouseenter="showFileInfo(file,1)" @mouseleave="showFileInfo(file,0)">
          <span :ref="'fileInfo_'+file.id" class="fileInfo">{{ file.name }}</span>
          <div>
            <div class="file_icon"></div>
          </div>
        </div>
        <div class="file_name">
          {{ file.name }}
        </div>
      </el-col>
    </el-col>
    <el-col v-if="!showAsBlock" :span="24" style="height: 72vh; overflow: auto">
      <el-table
        ref="multipleTable"
        :data="fileList"
        @selection-change="selectChanged"
        tooltip-effect="dark"
        style="width: 100%"
        @row-dblclick="fileOpen"
        height="100%"
      >
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="name"
          label=""
          width="50">
          <template slot-scope='scope'>
            <!-- <i v-if="scope.row.fileType == 'FOLDER'" class='iconfont icon-wenjianjia' style="color: rgb(255, 202, 40)"></i>
            <i v-if="scope.row.fileType == 'docx' || scope.row.fileType == 'doc'" class='iconfont icon-doc'></i>
            <i v-if="scope.row.fileType == 'xlsx' || scope.row.fileType == 'xls'" class='iconfont icon-wenjiangeshi_xlsx'></i> -->
            <svg v-if="scope.row.fileType == 'FOLDER'" t="1633698762007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9650" width="22" height="22"><path d="M918.673 883H104.327C82.578 883 65 867.368 65 848.027V276.973C65 257.632 82.578 242 104.327 242h814.346C940.422 242 958 257.632 958 276.973v571.054C958 867.28 940.323 883 918.673 883z" fill="#FFE9B4" p-id="9651"></path><path d="M512 411H65V210.37C65 188.597 82.598 171 104.371 171h305.92c17.4 0 32.71 11.334 37.681 28.036L512 411z" fill="#FFB02C" p-id="9652"></path><path d="M918.673 883H104.327C82.578 883 65 865.42 65 843.668V335.332C65 313.58 82.578 296 104.327 296h814.346C940.422 296 958 313.58 958 335.332v508.336C958 865.32 940.323 883 918.673 883z" fill="#FFCA28" p-id="9653"></path></svg>
            <!-- <svg v-else-if="scope.row.fileType == 'xlsx' || scope.row.fileType == 'xls'" t="1633698633978" class="icon" viewBox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5656" width="22" height="22"><path d="M1.248 0h1024v1024h-1024z" fill-opacity="0" p-id="5657"></path><path d="M849.248 1024h-672c-41.6 0-76.8-35.2-73.6-80V80c0-41.6 32-76.8 73.6-80h521.6l224 236.8v710.4c0 41.6-32 76.8-73.6 76.8z" fill="#F5F1EC" p-id="5658"></path><path d="M922.848 313.6h-819.2V80c0-41.6 32-76.8 73.6-80h521.6l224 236.8v76.8z" fill="#E0B773" p-id="5659"></path><path d="M244.448 252.8v-57.6h25.6l25.6 54.4h25.6l-32-54.4c19.2-6.4 25.6-19.2 25.6-35.2 0-12.8-3.2-22.4-12.8-28.8-6.4-6.4-16-9.6-25.6-9.6h-51.2v131.2h19.2z m32-73.6h-32v-38.4h32c6.4 0 9.6 0 16 3.2 3.2 3.2 3.2 6.4 3.2 16 0 6.4-3.2 9.6-6.4 12.8 0 3.2-6.4 6.4-12.8 6.4z m83.2 73.6l9.6-28.8h48l9.6 28.8h22.4l-48-131.2h-16l-48 131.2h22.4z m54.4-48h-38.4l19.2-57.6 19.2 57.6z m86.4 48v-57.6h25.6l25.6 54.4h22.4l-28.8-54.4c16-6.4 25.6-19.2 25.6-35.2 0-12.8-3.2-22.4-12.8-28.8-6.4-6.4-16-9.6-25.6-9.6h-51.2v131.2h19.2z m28.8-73.6h-28.8v-38.4h32c6.4 0 9.6 0 16 3.2 3.2 3.2 6.4 6.4 6.4 16 0 6.4-3.2 9.6-6.4 12.8-6.4 3.2-12.8 6.4-19.2 6.4z" fill="#FFFFFF" p-id="5660"></path><path d="M922.848 236.8h-150.4c-41.6 0-76.8-35.2-73.6-80V0l112 118.4 112 118.4z" fill="#F5F1EC" p-id="5661"></path><path d="M426.848 464v409.6h172.8V464h-172.8z m150.4 140.8h-64v41.6h64v44.8h-64v41.6h64v44.8h-64v44.8h-64v-44.8h64v-44.8h-64v-41.6h64v-44.8h-64v-41.6h64v-41.6h-64v-44.8h64v44.8h64v41.6z" fill="#E0B773" p-id="5662"></path></svg> -->
            <svg v-else-if="scope.row.fileType == 'docx' || scope.row.fileType == 'doc'" t="1633698781988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9798" width="22" height="22"><path d="M704 0H192a64 64 0 0 0-64 64v320h576a64 64 0 0 1 64 64v416a64 64 0 0 1-64 64H128v32a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320z" fill="#EAEAEA" p-id="9799"></path><path d="M704 0v256a64 64 0 0 0 64 64h256z" fill="#434854" p-id="9800"></path><path d="M768 320l256 256V320H768z" opacity=".1" p-id="9801"></path><path d="M704 832a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32V480a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32z" fill="#2C97FF" p-id="9802"></path><path d="M192 544h-48a16 16 0 0 0-16 16v192a16 16 0 0 0 16 16h48a64 64 0 0 0 64-64v-96a64 64 0 0 0-64-64z m0 192h-32V576h32a32 32 0 0 1 32 32v96a32 32 0 0 1-32 32z m160-192a64 64 0 0 0-64 64v96a64 64 0 0 0 64 64 64 64 0 0 0 64-64v-96a64 64 0 0 0-64-64z m32 160a32 32 0 0 1-32 32 32 32 0 0 1-32-32v-96a32 32 0 0 1 32-32 32 32 0 0 1 32 32z m128 32a32 32 0 0 1-32-32v-96a32 32 0 0 1 32-32 32 32 0 0 1 32 32h32a64 64 0 0 0-64-64 64 64 0 0 0-64 64v96a64 64 0 0 0 64 64 64 64 0 0 0 64-64h-32a32 32 0 0 1-32 32z" fill="#FFFFFF" p-id="9803"></path></svg>
            <svg v-else-if="scope.row.fileType == '7z'" t="1633698824696" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9948" width="22" height="22"><path d="M847.104 1024H176.896a76.8 76.8 0 0 1-74.496-78.848V78.848A76.8 76.8 0 0 1 176.896 0h521.216L921.6 236.288v708.864A76.8 76.8 0 0 1 847.104 1024z" fill="#F2ECF5" p-id="9949"></path><path d="M921.6 315.136H102.4V78.848A76.8 76.8 0 0 1 176.896 0h521.216L921.6 236.288z" fill="#A485BC" p-id="9950"></path><path d="M921.6 236.288H772.608a76.8 76.8 0 0 1-74.496-78.848V0l111.872 118.272z" fill="#F2ECF5" p-id="9951"></path><path d="M276.736 144.128v-1.536h-66.048v-17.408h86.016v17.92l-55.04 108.544h-20.48z m42.24 93.44l68.608-92.928v-1.536h-66.56v-17.92h91.136v14.08l-68.352 92.928v1.536h69.888v17.92h-94.72z" fill="#FFFFFF" p-id="9952"></path><path d="M425.728 463.36v409.6h172.544v-409.6z m151.04 140.032H512V646.4h64.768v43.264H512v43.008h64.768v43.264H512V819.2h-64.768v-43.264H512v-43.264h-64.768v-43.008H512V646.4h-64.768v-43.008H512v-43.008h-64.768V517.12H512v43.264h64.768z" fill="#A485BC" p-id="9953"></path></svg>
            <svg v-else-if="scope.row.fileType == 'gif'" t="1633698851993" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10098" width="22" height="22"><path d="M704 0H192a64 64 0 0 0-64 64v320h576a64 64 0 0 1 64 64v416a64 64 0 0 1-64 64H128v32a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320z" fill="#EAEAEA" p-id="10099"></path><path d="M704 0v256a64 64 0 0 0 64 64h256z" fill="#434854" p-id="10100"></path><path d="M768 320l256 256V320H768z" opacity=".1" p-id="10101"></path><path d="M704 832a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32V480a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32z" fill="#CC7598" p-id="10102"></path><path d="M288 672h-80a16 16 0 0 0 0 32h48a32 32 0 0 1-32 32h-32a32 32 0 0 1-32-32v-96a32 32 0 0 1 32-32h32a32 32 0 0 1 32 32 16 16 0 0 0 32 0 64 64 0 0 0-64-64h-32a64 64 0 0 0-64 64v96a64 64 0 0 0 64 64h32a64 64 0 0 0 64-64 16 16 0 0 0 0-32z m96 80a16 16 0 0 1-16 16 16 16 0 0 1-16-16V560a16 16 0 0 1 16-16 16 16 0 0 1 16 16z m176-208h-96a16 16 0 0 0-16 16v192a16 16 0 0 0 32 0v-80h48a16 16 0 0 0 0-32h-48v-64h80a16 16 0 0 0 0-32z" fill="#FFFFFF" p-id="10103"></path></svg>
            <svg v-else-if="scope.row.fileType == 'mp4'" t="1633698878304" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10248" width="22" height="22"><path d="M704 0H192c-35.328 0-64 28.672-64 64v320h576c35.328 0 64 28.672 64 64v415.744c0 35.328-28.672 64-64 64H128v31.744c0 35.328 28.672 64 64 64h768c35.328 0 64-28.672 64-64v-640L704 0z" fill="#EAEAEA" p-id="10249"></path><path d="M704 0v256c0 35.328 28.672 64 64 64h256L704 0z" fill="#434854" p-id="10250"></path><path d="M768 320l256 256V320z" opacity=".1" p-id="10251"></path><path d="M704 832c0 17.92-14.336 31.744-31.744 31.744H31.744C13.824 863.744 0 849.408 0 832V480.256c0-17.92 14.336-31.744 31.744-31.744h640c17.92 0 31.744 14.336 31.744 31.744V832z" fill="#724AE2" p-id="10252"></path><path d="M537.088 547.84c9.728 0 14.336 4.608 14.336 13.824v132.608h18.944c9.728 0.512 14.336 4.608 14.336 13.312s-5.12 13.312-15.36 13.312h-18.432v37.888c-0.512 9.728-5.12 14.336-13.824 14.336s-13.312-5.12-13.312-15.36v-36.864h-79.36c-12.8-0.512-19.456-4.096-19.456-11.776 0-4.096 1.536-7.68 4.096-11.776l94.208-141.312 0.512-1.024c3.584-4.608 8.192-7.168 13.312-7.168z m-302.592-1.536c7.168 0 11.264 5.12 11.264 15.872v193.536c0 10.752-4.608 15.872-11.264 15.872s-11.264-5.12-11.264-15.872V622.08l-44.544 140.8c-2.048 6.144-8.192 8.704-12.288 8.704s-10.24-3.072-12.288-8.704l-46.08-140.8v133.632c0 10.752-6.144 15.872-12.8 15.872s-12.8-5.12-12.8-15.872V562.176c0-10.752 5.632-15.872 12.8-15.872 4.608 0 10.752 3.072 12.8 8.704L166.4 728.064l56.832-173.056c2.048-6.144 6.144-8.704 11.264-8.704z m121.856 0c35.328 0 63.488 28.672 63.488 64 0 34.816-27.648 62.976-62.464 64h-33.28v79.872c0 8.704-7.168 15.872-15.872 15.872-8.192 0-15.36-6.656-15.872-14.848V562.176c0-8.192 6.656-15.36 14.848-15.872h49.152z m166.912 58.368l-59.904 90.112h59.904v-90.112z m-166.912-26.624h-31.744v64h31.744c17.92 0 31.744-14.848 31.744-32.256s-13.824-31.744-31.744-31.744z" fill="#FFFFFF" p-id="10253"></path></svg>
            <svg v-else-if="scope.row.fileType == 'txt'" t="1633698905544" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10398" width="22" height="22"><path d="M0 0h1024v1024H0z" fill-opacity="0" p-id="10399"></path><path d="M704 0H192c-38.4 0-64 25.6-64 64v320h576c38.4 0 64 25.6 64 64v416c0 38.4-25.6 64-64 64H128v32c0 38.4 25.6 64 64 64h768c38.4 0 64-25.6 64-64V320L704 0z" fill="#EAEAEA" p-id="10400"></path><path d="M704 0v256c0 38.4 25.6 64 64 64h256L704 0z" fill="#434854" p-id="10401"></path><path d="M768 320l256 256V320z" opacity=".1" p-id="10402"></path><path d="M704 832c0 19.2-12.8 32-32 32H32c-19.2 0-32-12.8-32-32V480c0-19.2 12.8-32 32-32h640c19.2 0 32 12.8 32 32v352z" fill="#A7A8FF" p-id="10403"></path><path d="M588.8 544h-128c-6.4 0-12.8 6.4-12.8 19.2s6.4 12.8 12.8 12.8H512v179.2c0 6.4 6.4 12.8 12.8 12.8s12.8-6.4 12.8-12.8V576h51.2c6.4 0 12.8-6.4 12.8-12.8s0-19.2-12.8-19.2z m-211.2 6.4c6.4-6.4 19.2-6.4 25.6-6.4 6.4 0 6.4 6.4 6.4 6.4v12.8l-51.2 83.2L416 736v12.8c0 6.4-6.4 6.4-6.4 12.8-12.8 6.4-19.2 6.4-25.6 0l-51.2-76.8-44.8 76.8c-6.4 6.4-12.8 6.4-25.6 6.4-6.4 0-6.4-6.4-6.4-6.4v-12.8l57.6-89.6-51.2-89.6v-12.8c0-6.4 6.4-6.4 6.4-6.4 6.4-6.4 19.2 0 25.6 6.4l44.8 70.4 38.4-76.8zM204.8 544c6.4 0 12.8 6.4 12.8 12.8s0 19.2-12.8 19.2H160v179.2c0 6.4-6.4 12.8-12.8 12.8s-19.2-6.4-19.2-12.8V576H76.8c-6.4 0-12.8-6.4-12.8-12.8s6.4-12.8 12.8-12.8h128z" fill="#FFFFFF" p-id="10404"></path></svg>
            <svg v-else-if="scope.row.fileType == 'pdf'" t="1633698929834" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10549" width="22" height="22"><path d="M704 0H192c-35.328 0-64 28.672-64 64v320h576c35.328 0 64 28.672 64 64v415.744c0 35.328-28.672 64-64 64H128v31.744c0 35.328 28.672 64 64 64h768c35.328 0 64-28.672 64-64v-640L704 0z" fill="#EAEAEA" p-id="10550"></path><path d="M704 0v256c0 35.328 28.672 64 64 64h256L704 0z" fill="#434854" p-id="10551"></path><path d="M768 320l256 256V320z" opacity=".1" p-id="10552"></path><path d="M704 832c0 17.92-14.336 31.744-31.744 31.744H31.744C13.824 863.744 0 849.408 0 832V480.256c0-17.92 14.336-31.744 31.744-31.744h640c17.92 0 31.744 14.336 31.744 31.744V832z" fill="#CD4050" p-id="10553"></path><path d="M192 544.256h-48.128c-8.704 0-15.872 7.168-15.872 15.872v192c0 8.704 7.168 15.872 15.872 15.872s15.872-7.168 15.872-15.872v-79.872h31.744c35.328 0 64-28.672 64-64s-28.16-64-63.488-64z m158.72 0c34.816 0 62.976 27.648 64 62.464v97.792c0 34.816-27.648 62.976-62.464 64h-49.664c-8.704 0-15.36-6.656-15.872-14.848V560.64c0-8.704 6.656-15.36 14.848-15.872h49.152z m227.328 0c8.704 0 15.872 7.168 15.872 15.872S586.752 576 578.048 576h-80.384v64h48.128c8.704 0 15.872 7.168 15.872 15.872s-7.168 15.872-15.872 15.872h-48.128v79.872c0 8.704-7.168 15.872-15.872 15.872s-15.872-7.168-15.872-15.872v-192c0-8.704 7.168-15.872 15.872-15.872h96.256zM350.72 576h-31.744v159.744h31.744c17.408 0 31.232-13.824 31.744-30.72v-97.28C382.976 590.336 368.64 576 350.72 576zM192 576c17.92 0 31.744 14.336 31.744 31.744S209.92 640 192 640h-31.744v-64H192z" fill="#FFFFFF" p-id="10554"></path></svg>
            <svg v-else-if="scope.row.fileType == 'rar'" t="1633698958144" class="icon" viewBox="0 0 1056 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10699" width="22" height="22"><path d="M1.248 0h1024v1024h-1024z" fill-opacity="0" p-id="10700"></path><path d="M849.248 1024h-672c-41.6 0-76.8-35.2-73.6-80V80c0-41.6 32-76.8 73.6-80h521.6l224 236.8v710.4c0 41.6-32 76.8-73.6 76.8z" fill="#F5F1EC" p-id="10701"></path><path d="M922.848 313.6h-819.2V80c0-41.6 32-76.8 73.6-80h521.6l224 236.8v76.8z" fill="#E0B773" p-id="10702"></path><path d="M244.448 252.8v-57.6h25.6l25.6 54.4h25.6l-32-54.4c19.2-6.4 25.6-19.2 25.6-35.2 0-12.8-3.2-22.4-12.8-28.8-6.4-6.4-16-9.6-25.6-9.6h-51.2v131.2h19.2z m32-73.6h-32v-38.4h32c6.4 0 9.6 0 16 3.2 3.2 3.2 3.2 6.4 3.2 16 0 6.4-3.2 9.6-6.4 12.8 0 3.2-6.4 6.4-12.8 6.4z m83.2 73.6l9.6-28.8h48l9.6 28.8h22.4l-48-131.2h-16l-48 131.2h22.4z m54.4-48h-38.4l19.2-57.6 19.2 57.6z m86.4 48v-57.6h25.6l25.6 54.4h22.4l-28.8-54.4c16-6.4 25.6-19.2 25.6-35.2 0-12.8-3.2-22.4-12.8-28.8-6.4-6.4-16-9.6-25.6-9.6h-51.2v131.2h19.2z m28.8-73.6h-28.8v-38.4h32c6.4 0 9.6 0 16 3.2 3.2 3.2 6.4 6.4 6.4 16 0 6.4-3.2 9.6-6.4 12.8-6.4 3.2-12.8 6.4-19.2 6.4z" fill="#FFFFFF" p-id="10703"></path><path d="M922.848 236.8h-150.4c-41.6 0-76.8-35.2-73.6-80V0l112 118.4 112 118.4z" fill="#F5F1EC" p-id="10704"></path><path d="M426.848 464v409.6h172.8V464h-172.8z m150.4 140.8h-64v41.6h64v44.8h-64v41.6h64v44.8h-64v44.8h-64v-44.8h64v-44.8h-64v-41.6h64v-44.8h-64v-41.6h64v-41.6h-64v-44.8h64v44.8h64v41.6z" fill="#E0B773" p-id="10705"></path></svg>
            <svg v-else-if="scope.row.fileType == 'ppt'" t="1633699011896" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10850" width="22" height="22"><path d="M704 0H192a64 64 0 0 0-64 64v320h576a64 64 0 0 1 64 64v416a64 64 0 0 1-64 64H128v32a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320z" fill="#EAEAEA" p-id="10851"></path><path d="M704 0v256a64 64 0 0 0 64 64h256z" fill="#434854" p-id="10852"></path><path d="M768 320l256 256V320H768z" opacity=".1" p-id="10853"></path><path d="M704 832a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32V480a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32z" fill="#F05264" p-id="10854"></path><path d="M192 544h-48a16 16 0 0 0-16 16v192a16 16 0 0 0 32 0v-80h32a64 64 0 0 0 0-128z m0 96h-32v-64h32a32 32 0 0 1 0 64z m160-96h-48a16 16 0 0 0-16 16v192a16 16 0 0 0 32 0v-80h32a64 64 0 0 0 0-128z m0 96h-32v-64h32a32 32 0 0 1 0 64z m240-96H464a16 16 0 0 0 0 32h48v176a16 16 0 0 0 32 0V576h48a16 16 0 0 0 0-32z" fill="#FFFFFF" p-id="10855"></path></svg>
            <svg v-else-if="scope.row.fileType == 'png'" t="1633699032157" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11000" width="22" height="22"><path d="M704 0H192a64 64 0 0 0-64 64v320h576a64 64 0 0 1 64 64v416a64 64 0 0 1-64 64H128v32a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320z" fill="#EAEAEA" p-id="11001"></path><path d="M704 0v256a64 64 0 0 0 64 64h256z" fill="#434854" p-id="11002"></path><path d="M768 320l256 256V320H768z" opacity=".1" p-id="11003"></path><path d="M704 832a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32V480a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32z" fill="#BAF1CD" p-id="11004"></path><path d="M160 544h-48a16 16 0 0 0-16 16v192a16 16 0 0 0 32 0v-80h32a64 64 0 0 0 0-128z m0 96h-32v-64h32a32 32 0 0 1 0 64z m448 32h-80a16 16 0 0 0 0 32h48a32 32 0 0 1-32 32h-32a32 32 0 0 1-32-32v-96a32 32 0 0 1 32-32h32a32 32 0 0 1 32 32 16 16 0 0 0 32 0 64 64 0 0 0-64-64h-32a64 64 0 0 0-64 64v96a64 64 0 0 0 64 64h32a64 64 0 0 0 64-64 16 16 0 0 0 0-32zM400 544a16 16 0 0 0-16 16v137.6l-98.88-146.56a7.36 7.36 0 0 0-2.24-2.24l-2.56-1.6h-16l-2.56 2.24v5.12a13.76 13.76 0 0 0 0 3.52v192a16 16 0 0 0 32 0v-137.6l96 142.08a15.68 15.68 0 0 0 32-3.2v-192A16 16 0 0 0 400 544z" fill="#FFFFFF" p-id="11005"></path></svg>
            <svg v-else-if="scope.row.fileType == 'jpg'" t="1633699049999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11150" width="22" height="22"><path d="M704 0H192a64 64 0 0 0-64 64v320h576a64 64 0 0 1 64 64v416a64 64 0 0 1-64 64H128v32a64 64 0 0 0 64 64h768a64 64 0 0 0 64-64V320z" fill="#EAEAEA" p-id="11151"></path><path d="M704 0v256a64 64 0 0 0 64 64h256z" fill="#434854" p-id="11152"></path><path d="M768 320l256 256V320H768z" opacity=".1" p-id="11153"></path><path d="M704 832a32 32 0 0 1-32 32H32a32 32 0 0 1-32-32V480a32 32 0 0 1 32-32h640a32 32 0 0 1 32 32z" fill="#BAF1CD" p-id="11154"></path><path d="M320 544h-48a16 16 0 0 0-16 16v192a16 16 0 0 0 32 0v-80h32a64 64 0 0 0 0-128z m0 96h-32v-64h32a32 32 0 0 1 0 64z m256 32h-80a16 16 0 0 0 0 32h48a32 32 0 0 1-32 32h-32a32 32 0 0 1-32-32v-96a32 32 0 0 1 32-32h32a32 32 0 0 1 32 32 16 16 0 0 0 32 0 64 64 0 0 0-64-64h-32a64 64 0 0 0-64 64v96a64 64 0 0 0 64 64h32a64 64 0 0 0 64-64 16 16 0 0 0 0-32zM208 544a16 16 0 0 0-16 16v144a32 32 0 0 1-64 0v-16a16 16 0 0 0-32 0v16a64 64 0 0 0 128 0V560a16 16 0 0 0-16-16z" fill="#FFFFFF" p-id="11155"></path></svg>
            <svg v-else-if="scope.row.fileType == 'xlsx' || scope.row.fileType == 'xls'" t="1633699080132" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11300" width="22" height="22"><path d="M696.96 0H190.08a63.36 63.36 0 0 0-63.36 63.36v316.8h570.24a63.36 63.36 0 0 1 63.36 63.36v411.84a63.36 63.36 0 0 1-63.36 63.36H126.72v31.68a63.36 63.36 0 0 0 63.36 63.36H950.4a63.36 63.36 0 0 0 63.36-63.36V316.8L696.96 0z" fill="#EAEAEA" p-id="11301"></path><path d="M696.96 0v253.44a63.36 63.36 0 0 0 63.36 63.36h253.44L696.96 0z" fill="#434854" p-id="11302"></path><path d="M760.32 316.8l253.44 253.44V316.8z" opacity=".1" p-id="11303"></path><path d="M696.96 823.68a31.68 31.68 0 0 1-31.68 31.68H31.68A31.68 31.68 0 0 1 0 823.68V475.2a31.68 31.68 0 0 1 31.68-31.68h633.6a31.68 31.68 0 0 1 31.68 31.68v348.48zM91.424 768h44.928l28.704-64.48L193.76 768h44.928l-52.832-107.744 50.336-103.168h-44.928l-26.208 59.904-26.208-59.904H93.92l49.504 103.168-52 107.744z m157.664-296.192v239.616c0 12.48 1.44 22.528 4.352 30.144 2.944 7.648 7.168 13.536 12.704 17.696 5.536 4.448 12.192 7.424 19.968 8.96 7.776 1.504 16.512 2.272 26.208 2.272V730.56c-8.032-0.832-13.504-2.688-16.448-5.6-2.88-2.944-4.352-8.416-4.352-16.448V471.808h-42.432zM405.92 616.16h39.936c0-8.608-1.536-16.704-4.576-24.32a61.504 61.504 0 0 0-12.48-19.776 54.656 54.656 0 0 0-18.912-12.896 61.76 61.76 0 0 0-23.936-4.576c-8.608 0-16.64 1.44-24.128 4.384a56.032 56.032 0 0 0-19.552 12.672 61.216 61.216 0 0 0-18.72 44.512c0 14.144 3.84 26.144 11.456 35.968 7.616 9.856 18.08 17.28 31.392 22.272l20.384 7.488c8.032 3.04 13.6 6.656 16.64 10.816A24.64 24.64 0 0 1 408 707.68c0 7.2-2.432 12.8-7.264 16.864a25.088 25.088 0 0 1-16.448 6.016c-8.032 0-13.664-2.496-16.864-7.488a40.416 40.416 0 0 1-6.016-16.224h-39.936c0.288 10.56 2.24 19.744 5.824 27.648 3.616 7.936 8.32 14.496 14.144 19.776 11.648 10.816 26.08 16.224 43.264 16.224 9.152 0 17.6-1.664 25.376-4.992 7.776-3.328 14.4-7.904 19.968-13.728 5.536-5.824 9.92-12.544 13.12-20.16 3.2-7.648 4.768-15.904 4.768-24.768 0-12.48-2.976-24-8.96-34.528-5.952-10.56-16.832-18.88-32.64-24.96l-24.96-9.984c-8.032-3.04-13.024-6.432-14.976-10.208a24.608 24.608 0 0 1-2.912-11.424c0-5.536 1.792-10.464 5.408-14.784 3.616-4.288 8.736-6.432 15.392-6.432 5.536 0 10.464 1.792 14.752 5.408 4.32 3.616 6.592 9.024 6.88 16.224zM453.344 768h44.928l28.704-64.48L555.68 768h44.928l-52.832-107.744 50.336-103.168h-44.928l-26.208 59.904-26.208-59.904H455.84l49.504 103.168-52 107.744z" fill="#FFB929" p-id="11304"></path></svg>
            <svg v-else-if="scope.row.fileType == 'zip'" t="1633699116123" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11449" width="22" height="22"><path d="M0 0h1024v1024H0z" fill-opacity="0" p-id="11450"></path><path d="M848 1024H176c-41.6 0-76.8-35.2-73.6-80V80c0-41.6 32-76.8 73.6-80h521.6l224 236.8v710.4c0 41.6-32 76.8-73.6 76.8z" fill="#F5ECEC" p-id="11451"></path><path d="M921.6 313.6H102.4V80c0-41.6 32-76.8 73.6-80h521.6l224 236.8v76.8z" fill="#BC8585" p-id="11452"></path><path d="M300.8 252.8v-19.2H240l57.6-96v-16h-80v16h57.6l-57.6 96v16h83.2z m70.4 0V121.6H352v131.2h19.2z m80 0v-51.2H480c12.8 0 22.4-3.2 32-12.8 6.4-6.4 9.6-16 9.6-25.6 0-6.4 0-12.8-3.2-19.2-3.2-6.4-6.4-9.6-9.6-12.8-6.4-3.2-9.6-6.4-16-6.4h-64V256h22.4z m28.8-70.4h-28.8v-41.6H480c6.4 0 9.6 0 12.8 3.2 3.2 0 3.2 3.2 6.4 6.4 0 3.2 3.2 6.4 3.2 9.6 0 6.4-3.2 9.6-6.4 12.8-3.2 6.4-9.6 9.6-16 9.6z" fill="#FFFFFF" p-id="11453"></path><path d="M921.6 236.8H771.2c-41.6 0-76.8-35.2-73.6-80V0l112 118.4 112 118.4z" fill="#F5ECEC" p-id="11454"></path><path d="M425.6 464v409.6h172.8V464H425.6zM576 604.8h-64v41.6h64v44.8h-64v41.6h64v44.8h-64v44.8h-64v-44.8h64v-44.8h-64v-41.6h64v-44.8h-64v-41.6h64v-41.6h-64v-44.8h64v44.8h64v41.6z" fill="#BC8585" p-id="11455"></path></svg>
            <svg v-else t="1633699140095" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11600" width="22" height="22"><path d="M914.92 287.344L697.718 81.474v128.338c0 43.554 34.968 79.189 77.706 79.189h141.99l-2.494-1.657z" fill="#027AFF" p-id="11601"></path><path d="M768.284 316.733c-54.48 0-99.056-48.997-99.056-108.882V66.223h-373.35c-30.593 0-55.624 27-55.624 60v348.869h490.802c37.476 0 68.137 33.073 68.137 73.496v207.894c0 40.424-30.661 73.497-68.137 73.497H240.254v70.128c0 33 25.031 60 55.625 60h563.637c30.594 0 55.625-27 55.625-60V316.733H768.284z" fill="#027AFF" p-id="11602"></path><path d="M699.302 519.057H156.028c-31.109 0-56.561 25.381-56.561 56.403v153.038c0 31.021 25.452 56.402 56.561 56.402h543.274c31.11 0 56.562-25.38 56.562-56.402V575.46c0-31.022-25.453-56.403-56.562-56.403z m-444.857 211.51c-4.902 4.135-10.558 6.203-16.874 6.203-6.41 0-12.066-2.068-16.874-6.204-4.902-4.042-7.353-9.118-7.353-15.417 0-6.204 2.451-11.468 7.353-15.604 4.902-4.042 10.558-6.016 16.874-6.016 6.41 0 12.16 1.974 17.157 6.016 4.902 4.136 7.353 9.4 7.353 15.604-0.094 6.11-2.545 11.28-7.636 15.417z m29.884-89.775c-2.263 2.068-9.993 6.957-23.379 14.571-3.865 2.256-6.222 4.136-7.07 5.64-0.566 0.846-0.849 2.82-0.849 6.016 0 4.7-1.508 8.367-4.619 10.81-2.828 2.539-6.222 3.761-10.464 3.761-4.43 0-8.107-1.128-10.84-3.29-3.489-2.632-5.186-6.392-5.186-11.28v-10.247c0-7.896 3.583-14.477 10.841-19.553 6.976-3.572 13.764-7.238 20.457-10.81 7.259-3.854 10.84-8.367 10.84-13.349 0-10.998-8.578-16.45-25.735-16.45-7.824 0-13.952 1.88-18.57 5.64-2.357 2.068-5.94 6.486-10.653 13.348-4.148 6.017-9.05 8.93-14.612 8.93-4.336 0-7.918-1.503-10.84-4.605-2.923-2.82-4.431-6.487-4.431-10.999 0-7.238 4.43-15.229 13.197-24.159 11.69-12.126 27.055-18.143 45.91-18.143 16.874 0 30.637 4.418 41.384 13.349 10.18 8.46 15.271 18.989 15.271 31.68 0 12.69-3.488 22.372-10.652 29.14zM442.7 730.566c-4.902 4.136-10.558 6.204-16.874 6.204-6.41 0-12.066-2.068-16.874-6.204-4.902-4.042-7.353-9.118-7.353-15.417 0-6.204 2.45-11.468 7.353-15.604 4.902-4.042 10.558-6.016 16.874-6.016 6.41 0 12.16 1.974 17.157 6.016 4.902 4.136 7.353 9.4 7.353 15.604-0.094 6.11-2.64 11.28-7.636 15.417z m29.884-89.774c-2.263 2.068-9.993 6.957-23.38 14.571-3.864 2.256-6.221 4.136-7.07 5.64-0.565 0.846-0.848 2.82-0.848 6.016 0 4.7-1.508 8.367-4.619 10.81-2.828 2.539-6.222 3.761-10.464 3.761-4.43 0-8.107-1.128-10.84-3.29-3.489-2.632-5.186-6.392-5.186-11.28v-10.247c0-7.896 3.583-14.477 10.841-19.553 6.976-3.572 13.764-7.238 20.457-10.81 7.258-3.854 10.84-8.367 10.84-13.349 0-10.998-8.578-16.45-25.735-16.45-7.824 0-13.952 1.88-18.57 5.64-2.358 2.068-5.94 6.486-10.653 13.348-4.148 6.017-9.05 8.93-14.612 8.93-4.336 0-7.919-1.503-10.841-4.605-2.922-2.82-4.43-6.487-4.43-10.999 0-7.238 4.43-15.229 13.197-24.159 11.69-12.126 27.055-18.143 45.91-18.143 16.873 0 30.637 4.418 41.383 13.349 10.181 8.46 15.272 18.989 15.272 31.68 0 12.69-3.582 22.372-10.652 29.14z m158.372 89.774c-4.902 4.136-10.558 6.204-16.874 6.204-6.41 0-12.067-2.068-16.874-6.204-4.902-4.042-7.353-9.118-7.353-15.417 0-6.204 2.45-11.468 7.353-15.604 4.902-4.042 10.558-6.016 16.874-6.016 6.41 0 12.16 1.974 17.157 6.016 4.902 4.136 7.353 9.4 7.353 15.604-0.094 6.11-2.64 11.28-7.636 15.417z m29.883-89.774c-2.262 2.068-9.992 6.957-23.378 14.571-3.865 2.256-6.222 4.136-7.07 5.64-0.566 0.846-0.85 2.82-0.85 6.016 0 4.7-1.507 8.367-4.618 10.81-2.828 2.539-6.222 3.761-10.464 3.761-4.43 0-8.107-1.128-10.841-3.29-3.488-2.632-5.185-6.392-5.185-11.28v-10.247c0-7.896 3.582-14.477 10.841-19.553 6.976-3.572 13.763-7.238 20.456-10.81 7.26-3.854 10.841-8.367 10.841-13.349 0-10.998-8.578-16.45-25.735-16.45-7.824 0-13.952 1.88-18.571 5.64-2.357 2.068-5.94 6.486-10.653 13.348-4.147 6.017-9.05 8.93-14.611 8.93-4.337 0-7.919-1.503-10.841-4.605-2.923-2.82-4.43-6.487-4.43-10.999 0-7.238 4.43-15.229 13.197-24.159 11.69-12.126 27.055-18.143 45.909-18.143 16.874 0 30.637 4.418 41.384 13.349 10.181 8.46 15.272 18.989 15.272 31.68 0 12.69-3.582 22.372-10.653 29.14z" fill="#027AFF" p-id="11603"></path></svg>
          
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="300"
          :formatter="nameFormatter">
        </el-table-column>
        <el-table-column
          prop="fileType"
          label="类型"
          :formatter="fileTypeFormat"
          width="100">
        </el-table-column>
        <el-table-column
          prop="createdDate"
          label="创建时间"
          width="150"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="remindId"
          min-width="100"
          label="提醒"
          :formatter="remindFormatter"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="size"
          label="大小"
          width="100"
          :formatter="sizeFormatter"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="fileCounts"
          label="文件数量"
          width="100"
          :formatter="fileCountsFormatter"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="createdUser"
          label="创建人"
          width="100"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          label="操作"
          width="100"
          fixed="right">
          <template slot-scope="scope">
            <div v-show="scope.row.fileType!=='FOLDER'">
              <el-button @click="preView(scope.row)" type="text" size="small">预览</el-button>
              <el-button @click="download(scope.row)" type="text" size="small">下载</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
    <el-col :span="24">
      <el-pagination
        :page-size.sync="pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[20, 40, 60,80]"
        layout="total, prev, pager, next"
        :total.sync="total">
      </el-pagination>
    </el-col>
  </el-card>
</template>

<script>
import moment from "moment";

export default {
  components: {},
  props: {
    initDatas: Object,
    searchAble: Boolean,
    diskInfoAble: Boolean,
    fileTypes: Array,
    diskInfo: Object,
    apiFileList: Object,
    apiFileDel: Object,
    apiDiskInfo: Object,
    showAsBlock: Boolean,
    fileCtrl: Object,
    root: String,
    intoFileType: String,
    rootPath:Object
  },
  data() {
    return {
      fileSearch: {
        name: null,
        type: null
      },
      fileList: [],
      diskInfoShow: true,
      searchShow: true,
      showUpload: false,
      uploadText: "上传",
      uploadPath: "",
      currentPage: 1,
      pageSize: 50,
      total: 0,
      unselected: true,
      position: {pre:null},
      deepList:[]
    };
  },
  created() {
  },
  mounted() {
    this.fileList = this.initDatas.dataList || [];
    this.total = this.initDatas.total || 100;
    this.fileTypes = this.fileTypes || [];
    this.diskInfoShow = this.diskInfoAble === undefined ? true : false;
    this.searchShow = this.searchAble === undefined ? true : false;
  },
  methods: {
    getPosition(){
    },
    getSpaceFreeFormat(diskInfo) {
      if (diskInfo) {
        let size = (diskInfo.spaceFree / 1024 / 1024);
        if (size >= 1024) {
          size = (size / 1024);
          if (size >= 1024) {
            return (size / 1024).toFixed(2) + "TB"
          }
          return size.toFixed(2) + "GB"
        }
        return size.toFixed(2) + "MB";
      }
      return "0KB";
    },
    nameFormatter(row, column, cellValue, index) {
      return cellValue.replace(/[.]\w+/, '');
    },
    fileCountsFormatter(row, column, cellValue, index) {
      return cellValue < 1 ? '---' : cellValue;
    },
    downloadFile(data, fileName, type = "text/plain") {
      const a = document.createElement("a");
      a.style.display = "none";
      document.body.appendChild(a);
      a.href = window.URL.createObjectURL(
        new Blob([data], {type})
      );
      a.setAttribute("download", fileName);
      a.click();
      window.URL.revokeObjectURL(a.href);
      document.body.removeChild(a);
    },
    download(row) {
      location.href = row.path;
      // this.downloadFile(row.path,row.path);
    },
    getDeepList(){
      return this.deepList;
    },
    preView(row) {
      this.$emit('preViewFile', row);
    },
    remindFormatter(row, column, cellValue, index) {
      if (cellValue) {
        if (row.remindTime) {
          if (row.remindDelay) {
            return '提醒时间:' + moment(row.remindTime).subtract(row.remindDelay, 'days').format('yyyy-MM-DD HH:mm:ss');
          }
          return '提醒时间:' + row.remindTime;
        }
        return '是';
      }
      return '无';
    },
    sizeFormatter(row, column, cellValue, index) {
      if (cellValue === 0) {
        return cellValue;
      }
      let mbSize = cellValue / 1024 / 1024;
      if (mbSize < 1) {
        return (mbSize * 1024).toFixed(2) + " KB"
      }
      return mbSize.toFixed(2) + " MB";
    },
    fileTypeFormat(row, column, cellValue, index) {
      return cellValue === this.intoFileType ? '文件夹' : cellValue;
    },
    handleSizeChange(size) {
      this.pageSize = size;
    },
    handleCurrentChange(page) {
      this.loadData({current: page, size: this.pageSize});
    },
    toPre() {
      this.deepList.pop();
      this.position = this.position.pre;
      this.loadData(this.position);
    },
    reset() {
    },
    refresh() {
      this.fileSearch = {};
      this.loadData(this.position,null,1);
    },
    search() {
      this.loadData(this.position, this.fileSearch,1);
    },
    showFileInfo(file, show) {
      let el = this.$refs['fileInfo_' + file.id];
      el[0].style.display = show ? 'block' : 'none';
    },
    newFile(name) {
      this.$emit('newFile', {type: name, data: this.position});
    },
    deleteFile() {
      let self = this;
      if (this.selectedList && this.apiFileDel) {
        let fileIds = [], folderIds = [];
        for (let obj of this.selectedList) {
          if (obj.fileType === this.intoFileType) {
            folderIds.push(obj.id);
            continue;
          }
          fileIds.push(obj.id);
        }
        this.apiFileDel.execute(data => {
          self.loadData(self.position);
        }, 'post', {
          folderIds: folderIds,
          fileIds: fileIds,
          parentId: this.position.value,
          parentType: this.position.type
        });
      }
    },
    selectChanged(selectedList) {
      this.unselected = !(selectedList && selectedList.length > 0);
      this.selectedList = selectedList;
      this.$emit('fileSelected', this.selectedList);
    },
    fileOpen(file, col) {
      let self=this;
      if (file.fileType === this.intoFileType) {
        this.position = {pre: self.position, value: file.id, next: 0, type: file.fileType};
        this.deepList.push(file.name);
        this.loadData(this.position,null,1);
      }
    },
    loadData(param, searchFile,inner) {
      if (param) {
        let rp=param.relationPath;
        param = {
          parentId: param.value,
          parentType: param.type
        }
        if (rp) {
          param.relationPath=rp;
        }
      } else {
        param = 0;
      }
      if(!inner){
        this.deepList=[];
      }
      this.apiFileList && (() => {
        this.apiFileList.execute(data => {
          this.total = data.data.dataList.total;
          this.position.value=data.data.pathInfo.currentId;
          this.position.type=data.data.pathInfo.currentType;
          if(data.data.pathInfo.path&&data.data.pathInfo.path.length>0){
            for(let o of data.data.pathInfo.path){
              this.deepList.push(o.name);
            }
          }
          this.fileList = data.data.dataList.dataList;
        }, 'get', searchFile ? Object.assign(searchFile, param) : param)
      })()
    }
  },
  watch: {
    diskInfo: {
      deep: true,
      handler: function (n, o) {
        if (!n) {
          return;
        }
        if (n.modify) {
          return;
        }
        this.position = {pre: 0, value: n.id, type: this.root, next: 0}
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../../assets/scss/variable";

.slide-fade-enter-active {
  transition: all 0.3s ease;
}

.slide-fade-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter, .slide-fade-leave-to
  /* .slide-fade-leave-active for below version 2.1.8 */
{
  transform: translateX(10px);
  opacity: 0;
}

.cloudFile_search_form {
  text-align: left;
  line-height: 2rem;
  width: 920px;
}

/*.cloud_file_entity {*/
/*  margin-top: 1rem;*/
/*}*/
.cloud_file_entity > .cloud_file_show {
  /* background-color: red; */
  position: relative;
  height: 8rem;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 1rem;
}

.cloud_file_entity > .cloud_file_show {
  cursor: pointer;
}

.cloud_file_entity > .cloud_file_show:hover {
  background-color: #409effd1;
  border-radius: 5%;
}

.cloud_file_entity > .cloud_file_show > div > .file_icon {
  //background-image: url(../../../public/icon/cad.png);
  background-image: $fileFolderIcon;
  width: 5rem;
  height: 5.5rem;
  background-repeat: no-repeat;
  background-size: 100%;
}

.cloud_file_entity > .file_name {
  font-size: 13px;
  margin-top: -3.5rem;
}

.upload-pop {
  position: absolute;
  margin-top: 3.5rem;
  /* display: none; */
}

.fileInput {
  height: 1rem;
  width: 2rem;
}

.fileInfo {
  position: absolute;
  width: 140px;
  height: 120px;
  border: solid 1px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 6px;
  display: none;
}
</style>
